<template>
  <div>
      <!-- 3. 使用组件 -->
    <search></search>
    <!-- 搜索部分 -->
    <!-- <div class="search"> -->
      <!-- <input type="text" placeholder="请输入内容"> -->
      <!-- <div class="search-input">
        <icon class="search-icon" type="search" size="30rpx"></icon>搜索
      </div> 
    </div> -->
  <!-- 轮播图部分 --> 
    <swiper indicator-dots
     autoplay
     indicator-active-color="#fff"
     indicator-color="rgba(255,255,255,.3)"
     current
     circular
     class="index-swiper"
    >
     <block v-for="(item,index) in imgUrls" :key="index">
       <swiper-item>
         <image mode="aspectFit" :src="item.image_src" class="slide-img"></image>
       </swiper-item>
     </block>
     </swiper>

     <!-- 菜单栏部分 -->
     <div class="menu">
       <div v-for="(item,index) in menu_img" :key="index">
         <image class="menu-img" :src="item.image_src" alt="" mode="aspectFit"></image>
       </div>
     </div>

    <!-- 首页楼层数据 -->
    <div class="floor">
      <div class="floor_title" v-for="(item,index) in floors" :key="index">
        <div class="floor-head">
          <image :src="item.floor_title.image_src" mode="aspectFit"></image>
        </div>
    

      <div class="floor-body">
        <div class="floor-body-left">
        <image :src="item.product_list[0].image_src" mode="aspectFit"></image>
        </div>
        <div class="floor-body-right">
          <image
              v-for="(subItem,subIndex) in item.product_list"
              :key="subIndex" 
              :src="subItem.image_src"
              v-show="subIndex != 0"
              >
              </image>
        </div>
    </div>
    </div>
      </div>
  </div>
</template>

<script>
import {getIndexSwiper,getIndexCat,getIndexFloor} from '@/api'
// 1. 导入组件
import Search from "@/components/search";
import request from '@/utils/request';
export default {
       // 2. 注册组件
  components: {
    Search
  },
  data () {
    return {
       imgUrls: [],
       menu_img:[],
       floors:[]
    }
  },
  mounted () {
    let page = this;
    getIndexSwiper().then(res=> {
      // console.log(res);
      this.imgUrls = res.data.message
    }),
    getIndexCat().then(res => {
      // console.log(res)
      this.menu_img = res.data.message
    }),
    getIndexFloor().then(res => {
      // console.log(res)
      this.floors = res.data.message
    })
  }
};
</script>

<style lang="scss" scoped>
.search {
  background-color: #ff2d4a;
  padding: 20rpx 16rpx;
}
.search-input {
  height: 35px;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 0 15rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30rpx;
}
.search-icon {
  margin-right: 16rpx;
}
.index-swiper{
  height: 340rpx;
}
.slide-img{
  width: 100%;
  height: 100%;
}
.menu{
  display: flex;
  justify-content: space-around;
}
.menu-img{
  width: 128rpx;
  height: 140rpx;
  padding: 30rpx;
}

// 楼层开始
  .floor{
    &-head{
      image{
        width: 100%;
        height: 88rpx;
        background-color: #eeebed;
      }
    }
    &-body{
      padding: 20rpx 0 20rpx 16rpx;
      display: flex;
      &-left{
        margin-right: 10rpx;
        image{
          width: 232rpx;
          height: 386rpx;
        }
      }
      &-right{
        display: flex;
        flex-wrap: wrap;
        image{
          width: 235rpx;
          height:188rpx;
          margin-right:10rpx;
        }
      }
    }
  }

</style>


